<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>template</title>
	<script src="lib/vue-2.1.3-min.js"></script>
</head>
<body>
	<h2>v-once单向插值</h2>
	<div id="once-bind" v-once>{{ onceMsg }}</div>
	<script>
		var vm = new Vue({
			el: "#once-bind", 
			data: {
				onceMsg: "只写一次的值 2.0已后有效"
			}
		});
		setTimeout(function(){
			vm.onceMsg = "change onceMsg";
		},1000);
	</script>

	<h2>双向绑定</h2>
	<div id="towaybind">{{ towaybind }}</div>
	<script>
		var vm2 = new Vue({
			el: "#towaybind", 
			data: {
				towaybind: "双向绑定值, 1秒后改为'change'"
			}
		});

		setTimeout(function() {
			vm2.towaybind = "change";
		}, 1000);
	</script>

	<h2>插入html内容</h2>
	<div id="rawhtml" v-html="rawhtml"></div>
	<script>
		var vm3 = new Vue({
			el: "#rawhtml", 
			data: {
				rawhtml: "<i>Flash</i> <strong>is best starcraft player</strong>"
			}
		});
	</script>

	<h2>属性</h2>
	<div id="prop" >
		<p v-bind:id="dynamicId">this div id is new-prop</p>
		<button v-bind:disabled="btnDisabled" v-on:click="handlClick">click me to disable me</button>

	</div>
	<script>
		var vm4 = new Vue({
			el: "#prop", 
			data: {
				dynamicId: "new-p",
				btnDisabled: false
			},
			methods: {
				handlClick: function() {
					this.btnDisabled = !this.btnDisabled;
				}
			}
		});
	</script>

	<h2>Javascript表达式</h2>
	<div id="js-express" >
		<p>{{ isOK ? "YES":"NO"}}</p>
		<p>{{ letter.split("").reverse().join("*") }}</p>
	</div>
	<script>
		var vm4 = new Vue({
			el: "#js-express", 
			data: {
				isOK: true,
				letter: "bluelight"
			}
		});
	</script>

	<h2>过滤器</h2>
	<div id="filter" >
		<p>{{ letter | toUpper }}</p>
		<p>Total Price {{ totalPrice | formatCurrency }}</p>
	</div>
	<script>
		var vm = new Vue({
			el: "#filter", 
			data: {
				letter: "when you need to find a way to breathe",
				totalPrice: 1000
			},
			filters: {
				formatCurrency: function(val) {
					return "￥" + val;
				},
				toUpper: function(val) {
					if(!val) 
						return val;
					return val.substr(0,1).toUpperCase() + val.substr(1, val.length-1);
				}
			}
		});
	</script>

	<h2>指令</h2>
	<div id="directive" >
		you can see <span v-if="seen">a message</span>,<br/>
		not see <span v-if="noseen">a message</span>
	</div>
	<script>
		var vm = new Vue({
			el: "#directive", 
			data: {
				seen: true,
				noseen: false
			}
		});
	</script>

	<h2>参数</h2>
	<div id="v-bind-v-on" >
		<p>
			一些指令能接受一个“参数”，在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
		</p>
		<p>
			在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
		</p>
		<a v-bind:href="url">www.oschia.net</a>
		<hr>

		<p>事件监听 v-on:click</p>

		<button v-on:click="sendMsg('msg arguments')">Click me</button>
	</div>
	<script>
		var vm = new Vue({
			el: "#v-bind-v-on", 
			data: {
				url: "http://www.oschina.net"
			},
			methods: {
				sendMsg: function(msg) {
					alert(msg);
				}
			}
		});
	</script>

	<h2>修饰符</h2>
	<div id="modifier" >
		<p>
			修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 
		</p>
		<form action="" v-on:submit.prevent="onSubmit">
			<button type="submit">Submit Form</button>
		</form>
	</div>
	<script>
		var vm = new Vue({
			el: "#modifier", 
			data: {
				
			},
			methods: {
				onSubmit: function(msg) {
					alert("submit form");
				}
			}
		});
	</script>

	<h2>缩写</h2>
	<div id="vbbreviation" >
		<p :title="abbreviation" :style="mystyle">see my title</p>

		<button @click="handlClick">Click me</button>
	</div>
	<script>
		var vm = new Vue({
			el: "#vbbreviation", 
			data: {
				abbreviation: "abbr",
				mystyle: "font-size:20px;"
			},
			methods: {
				handlClick: function() {
					alert("clicked");
				}
			}
		});
	</script>
</body>
</html>